<script setup lang="ts"></script>
<template>
  <div class="flex">
    <div class="box"> <div class="heard"></div></div>
  </div>
</template>
<style scoped lang="scss">
  .box {
    border: 1px solid gainsboro;
  }
  .heard {
    display: flex;
    overflow: hidden;

    width: 102px;
    height: 86px;
    &::before,
    &::after {
      display: block;

      width: 50px;
      height: 80px;

      content: '';

      border-radius: 50px 50px 0 0;
      background-color: #bc4045;
    }
    &::before {
      transform: translateX(12px) rotateZ(-45deg);
    }
    &::after {
      transform: translateX(-17px) rotateZ(45deg);
    }
  }
</style>
